
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title th:text="${baseinfo.title}"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" th:content="${baseinfo.description}"/>
    <meta name="keywords" th:content="${baseinfo.keywords}"/>
    <meta name="author" th:content="${baseinfo.author}"/>

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" th:href="${baseinfo.shortcuticon}">

    <!--<link href='http://fonts.useso.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>-->

    <!-- Animate.css -->
    <link rel="stylesheet" href="static/YLUI/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="static/YLUI/css/icomoon.css">
    <!-- Simple Line Icons -->
    <link rel="stylesheet" href="static/YLUI/css/simple-line-icons.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="static/YLUI/css/bootstrap.css">
    <!-- Owl Carousel  -->
    <link rel="stylesheet" href="static/YLUI/css/owl.carousel.min.css">
    <link rel="stylesheet" href="static/YLUI/css/owl.theme.default.min.css">
    <!-- Style -->
    <link rel="stylesheet" href="static/YLUI/css/style.css">
    <link rel="stylesheet" href="static/YLUI/fonts/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="static/YLUI/fonts/fonts/style.css">


    <!-- Modernizr JS -->
    <script src="static/YLUI/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="static/YLUI/js/respond.min.js"></script>
    <![endif]-->
<style>
    .row1 {
        float: left;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    .our-team .row1 .team-box {
        display: inline-block;
        float: none !important;
        margin-right: -4px;
        margin-bottom: 25px;
        vertical-align: top;
    }
    /*---------------------------------------
 **   Section: Our team;              -----
-----------------------------------------*/
    .our-team {
        padding-bottom: 66px;
        padding-top: 100px;
        background: #FFFFFF;
    }
    .team-member {
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        margin-bottom: 35px;
    }
    .team-member .details {
        text-align: left;
        font-size: 13px;
        line-height: 20px;
        position: absolute;
        padding: 15px;
        top: -200px;
        left: 0;
        width: 100%;
        height: 190px;
        -webkit-transition: all 500ms;
        transition: all 500ms;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
    }
    .team-member .member-details {
        position: relative;
        display: inline-block;
        padding-bottom: 5px;
    }
    .team-member:hover .details, .team-member:focus .details {
        top: 0;
        background: #333;
        color: white;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }
    .team-member.team-member-open .details {
        display: block;
        top: 0;
        background: #333;
        color: white;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }
    .team-member .profile-pic {
        border-radius: 50%;
        width: 174px;
        height: 174px;
        margin: auto;
        overflow: hidden;
        margin-bottom: 25px;
    }
    .team-member .profile-pic img {
        width: 100%;
        height: 100%;
    }
    .team-member h3 {
        text-transform: uppercase;
        color: #404040;
        font-weight: 700;
        font-size: 17px;
        position: relative;
        margin-top: 15px;
    }
    .team-member .position {
        font-size: 13px;
    }
    .team-member .social-icons {
        margin-bottom: 25px;
    }
    .team-member .social-icons ul {
        margin: 0 0 1.5em 0;
    }
    .team-member .social-icons ul li {
        display: inline-block;
        line-height: 32px;
        margin: 6px;
    }
    .team-member .social-icons ul li a {
        background: #FFF;
        font-size: 18px;
        border-radius: 50%;
        color: #808080;
    }
    .team-member .social-icons ul li a:hover {
        color: #e96656;
    }
    .our-team .row > span:nth-child(4n+1) .red-border-bottom:before{
        background: #e96656;
    }
    .our-team .row > span:nth-child(4n+2) .red-border-bottom:before{
        background: #34d293;
    }
    .our-team .row > span:nth-child(4n+3) .red-border-bottom:before{
        background: #3ab0e2;
    }
    .our-team .row > span:nth-child(4n+4) .red-border-bottom:before{
        background: #f7d861;
    }

    /*---------------------------------------
 **   BORDER BOTTOMS                 -----
-----------------------------------------*/

    .white-border-bottom:before {
        position: absolute;
        z-index: 1;
        bottom: -9px;
        left: 25%;
        width: 50%;
        height: 2px;
        margin: auto;
        background: #f5f5f5;
        content: "";
    }
    .dark-border-bottom:before {
        position: absolute;
        z-index: 1;
        bottom: -9px;
        left: 25%;
        width: 50%;
        height: 2px;
        margin: auto;
        background: #404040;
        content: "";
    }
    .red-border-bottom:before {
        position: absolute;
        z-index: 1;
        bottom: -9px;
        left: 12.5%;
        width: 75%;
        height: 2px;
        margin: auto;
        background: #e96656;
        content: "";
    }
    .green-border-bottom:before {
        position: absolute;
        z-index: 1;
        bottom: -9px;
        left: 12.5%;
        width: 75%;
        height: 2px;
        margin: auto;
        background: #34d293;
        content: "";
    }
    .blue-border-bottom:before {
        position: absolute;
        z-index: 1;
        bottom: -9px;
        left: 12.5%;
        width: 75%;
        height: 2px;
        margin: auto;
        background: #3ab0e2;
        content: "";
    }
    .yellow-border-bottom:before {
        position: absolute;
        z-index: 1;
        bottom: -9px;
        left: 12.5%;
        width: 75%;
        height: 2px;
        margin: auto;
        background: #f7d861;
        content: "";
    }
    /* mobile background fix */
    .mobile-bg-fix-wrap {
        overflow: hidden;
        width: 100%;
    }

    .mobile-bg-fix-wrap .mobile-bg-fix-img-wrap {
        position: fixed;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .mobile-bg-fix-wrap .mobile-bg-fix-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 125%;
        background-size: cover;
    }

    .mobile-bg-fix-wrap .mobile-bg-fix-whole-site {
        position: relative;
        z-index: 1;
    }
    /*---------------------------------------
 **   Section: Our focus             -----
-----------------------------------------*/
    .focus-box .service-icon .pixeden  {
        border-radius: 50%;
    }
    .focus {
        padding-bottom: 100px;
        overflow: hidden;
        background: #FFFFFF;

    }
    .focus .row {
        text-align:center;
    }
    .focus .row .focus-box, .our-team .row .team-box {
        display:inline-block;
        float:none !important;
        margin-right: -4px;
        vertical-align: top;
        margin-bottom: 25px;
    }
    .our-team div{
        vertical-align: baseline;
    }
</style>
</head>
<body>
<header role="banner" id="fh5co-header">
    <div class="fluid-container">
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <!-- Mobile Toggle Menu Button -->
                <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar"
                   aria-expanded="false" aria-controls="navbar"><i></i></a>
                <a class="navbar-brand" href="#"><span>I</span>FI</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse"><!--th:class="${navbarinfo.spareflag1}"-->
                <ul class="nav navbar-nav navbar-right">
                    <li class="" th:each="navbarinfo:${navbarinfoList}">
                    <a th:href="${navbarinfo.hyperlink}" th:attr="data-nav-section=${navbarinfo.sparefield1}"><span th:text="${navbarinfo.name}"></span></a>
                </li>
                    <!--<li class="call-to-action">-->
                        <!--<a onclick="window.open('https://github.com/yuri2peter/ylui/tree/master/documents')"-->
                           <!--href="https://github.com/yuri2peter/ylui/tree/master/documents"-->
                           <!--target="_blank"><span>开发文档</span></a></li>-->
                </ul>
            </div>
        </nav>
    </div>
</header>

<section id="fh5co-home" data-section="home" th:style="'background-image: url(' +${productionshow.picurl}+');'"
         data-stellar-background-ratio="0.5">
    <div class="gradient"></div>
    <div class="container">
        <div class="text-wrap">
            <div class="text-inner">
                <div class="row">
                    <div class="htmlTableCol-md-8 htmlTableCol-md-offset-2">
                        <h1 class="to-animate" th:text="${productionshow.title}"></h1>
                        <h2 class="to-animate" th:utext="${productionshow.titledescription}">
                        </h2>
                        <!--<div class="call-to-action">-->
                            <!--<a href="http://www.bycodes.net/ylui" target="_blank" class="demo to-animate">Demo</a>-->
                            <!--<a href="https://github.com/yuri2peter/ylui" target="_blank" class="download to-animate">Download</a>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="fh5co-explore" data-section="explore">
    <div class="container">
        <div class="row">
            <div class="htmlTableCol-md-12 section-heading text-center">
                <h2 class="to-animate" th:text="${production.title}"></h2>
                <div class="row">
                    <div class="htmlTableCol-md-8 htmlTableCol-md-offset-2 subtext to-animate">
                        <h3 th:text="${production.titledescription}"></h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="fh5co-explore">
        <div class="container">
            <div class="row">
                <div class="htmlTableCol-md-8 htmlTableCol-md-push-5 to-animate-2">
                    <img class="img-responsive" src="static/YLUI/images/work_3.png" alt="work">
                </div>
                <div class="htmlTableCol-md-4 htmlTableCol-md-pull-8 to-animate-2">
                    <div class="mt">
                        <h3>丰富的桌面UI元素</h3>
                        <p>YLUI最大程度地还原广了大用户熟悉的桌面操作模式，以各种形式的快捷方式定义操作入口，以子窗口承载信息主体。</p>
                        <ul class="list-nav">
                            <li><i class="icon-check2"></i>经典的图标+菜单+侧边栏模式</li>
                            <li><i class="icon-check2"></i>流畅的操作体验</li>
                            <li><i class="icon-check2"></i>可拖拽可分组的磁贴</li>
                            <li><i class="icon-check2"></i>符合windows操作逻辑的多窗口管理</li>
                            <li><i class="icon-check2"></i>丰富的视觉效果，自定义主题</li>
                            <li><i class="icon-check2"></i>可视化创建图标、磁贴、文件夹、桌面小工具、动态壁纸——DIY，从未如此简单</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
<div class="fh5co-explore fh5co-explore-bg-color">
        <div class="container">
            <div class="row">
                <div class="htmlTableCol-md-8 htmlTableCol-md-pull-1 to-animate-3">
                    <img class="img-responsive" th:src="${production.picurl}" alt="work">
                </div>
                <div class="htmlTableCol-md-4 to-animate-3">
                    <div class="mt">
                        <div th:each="productionfeature:${productionfeatureList}">
                            <h4 th:text="${productionfeature.name}"><i th:class="${productionfeature.sparefield1}" ></i></h4>
                            <p th:text="${productionfeature.description}"> </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="container">-->
        <!--<div class="row">-->
            <!--<div class="htmlTableCol-md-12 section-heading text-center">-->
                <!--<h2 class="to-animate">产品</h2>-->
                <!--<div class="row">-->
                    <!--<div class="htmlTableCol-md-8 htmlTableCol-md-offset-2 subtext to-animate">-->
                        <!--<h3>作为一款桌面UI，我们只专注于一件事 —— 更好地组织您的内容</h3>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

    <!--<div class="fh5co-explore">-->
        <!--<div class="container">-->
            <!--<div class="row">-->
                <!--<div class="htmlTableCol-md-8 htmlTableCol-md-push-5 to-animate-2">-->
                    <!--<img class="img-responsive" src="/static/YLUI/images/work_1.png" alt="work">-->
                <!--</div>-->
                <!--<div class="htmlTableCol-md-4 htmlTableCol-md-pull-8 to-animate-2">-->
                    <!--<div class="mt">-->
                        <!--<h3>丰富的桌面UI元素</h3>-->
                        <!--<p>YLUI最大程度地还原广了大用户熟悉的桌面操作模式，以各种形式的快捷方式定义操作入口，以子窗口承载信息主体。</p>-->
                        <!--<ul class="list-nav">-->
                            <!--<li><i class="icon-check2"></i>经典的图标+菜单+侧边栏模式</li>-->
                            <!--<li><i class="icon-check2"></i>流畅的操作体验</li>-->
                            <!--<li><i class="icon-check2"></i>可拖拽可分组的磁贴</li>-->
                            <!--<li><i class="icon-check2"></i>符合windows操作逻辑的多窗口管理</li>-->
                            <!--<li><i class="icon-check2"></i>丰富的视觉效果，自定义主题</li>-->
                            <!--<li><i class="icon-check2"></i>可视化创建图标、磁贴、文件夹、桌面小工具、动态壁纸——DIY，从未如此简单</li>-->
                        <!--</ul>-->
                    <!--</div>-->
                <!--</div>-->

            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

    <!--<div class="fh5co-explore fh5co-explore-bg-color">-->
        <!--<div class="container">-->
            <!--<div class="row">-->
                <!--<div class="htmlTableCol-md-8 htmlTableCol-md-pull-1 to-animate-3">-->
                    <!--<img class="img-responsive" src="images/work_2.png" alt="work">-->
                <!--</div>-->
                <!--<div class="htmlTableCol-md-4 to-animate-3">-->
                    <!--<div class="mt">-->
                        <!--<div>-->
                            <!--<h4><i class="icon-html5"></i>基于WEB前端实现</h4>-->
                            <!--<p>由HTML+CSS+JS打造，完美运行于主流浏览器，不限制后端语言。支持使用第三方工具打包为APP或桌面应用程序。</p>-->
                        <!--</div>-->
                        <!--<div>-->
                            <!--<h4><i class="icon-database"></i>可序列化状态</h4>-->
                            <!--<p>YLUI在运行过程中的状态支持以json格式随时被序列化及反序列化，这将为本地缓存，网络传输、多用户定制带来极大的便利。</p>-->
                        <!--</div>-->
                        <!--<div>-->
                            <!--<h4><i class="icon-frame"></i>页面组件化</h4>-->
                            <!--<p>窗体是桌面UI的灵魂，YLUI的窗体支持动态URL管理，跨域级别的子窗口通信。基于此特性您轻松实现多窗体联动，开发出可灵活可复用的子窗口；强大的API让您能使用代码控制整个UI的runtime，甚至可以构造自己的应用商店！</p>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</section>
<section id="fh5co-testimony" data-section="testimony">
    <div class="container">
        <div class="row">
            <div class="htmlTableCol-md-12 to-animate">
                <div class="wrap-testimony">
                    <div class="owl-carousel-fullwidth">
                        <div class="item">
                            <div class="testimony-slide active text-center">
                                <figure>
                                    <img src="https://q1.qlogo.cn/g?b=qq&nk=757401350&s=100" alt="user">
                                </figure>
                                <blockquote>
                                    <p>"跨平台兼容性较好，用户体验度上较1.X版本中在UI展示上有较大提升，界面更加美观。如果说系统可以支持IE8+的基础并且在浏览器内存消耗上小于同级别框架，在我公司来说可以作为首推JS框架。"</p>
                                </blockquote>
                                <span> Small Boy (Internal test experience User)</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimony-slide active text-center">
                                <!--<figure>-->
                                    <!--<img src="https://q1.qlogo.cn/g?b=qq&nk=842105949&s=100" alt="user">-->
                                <!--</figure>-->
                                <!--<blockquote>-->
                                    <!--<p>"人生苦短，我用YLUI。"</p>-->
                                <!--</blockquote>-->
                                <!--<span>CcDalao</span>-->
                                <figure>
                                    <div class="row">
                                        <div class="htmlTableCol-md-8 htmlTableCol-md-push-5 to-animate-2">
                                            <img class="img-responsive" src="/static/YLUI/images/work_1.png" alt="work">
                                        </div>
                                        <div class="htmlTableCol-md-4 htmlTableCol-md-pull-8 to-animate-2">
                                            <div class="mt">
                                                <h3>丰富的桌面UI元素</h3>
                                                <p>YLUI最大程度地还原广了大用户熟悉的桌面操作模式，以各种形式的快捷方式定义操作入口，以子窗口承载信息主体。</p>
                                                <ul class="list-nav">
                                                    <li><i class="icon-check2"></i>经典的图标+菜单+侧边栏模式</li>
                                                    <li><i class="icon-check2"></i>流畅的操作体验</li>
                                                    <li><i class="icon-check2"></i>可拖拽可分组的磁贴</li>
                                                    <li><i class="icon-check2"></i>符合windows操作逻辑的多窗口管理</li>
                                                    <li><i class="icon-check2"></i>丰富的视觉效果，自定义主题</li>
                                                    <li><i class="icon-check2"></i>可视化创建图标、磁贴、文件夹、桌面小工具、动态壁纸——DIY，从未如此简单</li>
                                                </ul>
                                            </div>
                                        </div>


                                </div></figure>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimony-slide active text-center">
                                <figure>
                                    <img src="https://q1.qlogo.cn/g?b=qq&nk=370672001&s=100" alt="user">
                                </figure>
                                <blockquote>
                                    <p>"整体感觉新颖、惊艳。简单易用，与微软操作系统的用法类似。"</p>
                                </blockquote>
                                <span>Chtao su2075 (Internal test experience User)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--<div class="getting-started getting-started-1">-->
    <!--<div class="container">-->
        <!--<div class="row">-->
            <!--<div class="htmlTableCol-md-6 to-animate">-->
                <!--<h3>加入社区</h3>-->
                <!--<p>加入WIN10UI，YLUI官方交流群，与上千开发者隔空交流。</p>-->
            <!--</div>-->
            <!--<div class="htmlTableCol-md-6 to-animate-2">-->
                <!--<div class="call-to-action text-right">-->
                    <!--<a href="https://jq.qq.com/?_wv=1027&k=5fAsios" class="sign-up">立即加入</a>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->

<section id="fh5co-pricing" data-section="pricing">
    <div class="fh5co-pricing">
        <div class="container">
            <div class="row">
                <div class="htmlTableCol-md-12 section-heading text-center">
                    <h2 class="to-animate" th:text="${price.title}"></h2>
                    <div class="row">
                        <div class="htmlTableCol-md-8 htmlTableCol-md-offset-2 subtext">
                            <h3 class="to-animate" th:text="${price.content}"></h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="pricing">
                    <div class="htmlTableCol-md-4" th:each="priceversion:${priceversionList}">
                        <div class="price-box to-animate-2" th:classappend="${priceversion.sparefield1}">
                            <h2 class="pricing-plan" th:text="${priceversion.title}"></h2>
                            <div class="price" th:text="${priceversion.currency}"></div>
                            <p>
                                <span th:each="priceversionfeature:${priceversion.priceversionfeatureList}" th:utext="${priceversionfeature.title}+'<br />'"></span>
                            </p>
                            <a target="_blank" href="https://github.com/yuri2peter/ylui" class="btn btn-select-plan btn-sm">立即体验</a>
                        </div>
                    </div>

                    <!--<div class="htmlTableCol-md-4">-->
                        <!--<div class="price-box to-animate-2 popular">-->
                            <!--<h2 class="pricing-plan">个人版</h2>-->
                            <!--<div class="price">￥400 / 年</div>-->
                            <!--<p>-->
                                <!--<span>个人商用使用权</span><br />-->
                                <!--<span>优先答疑和问题修复</span><br />-->
                                <!--<span>隐藏推广信息</span><br />-->
                                <!--<span>VIP用户交流群</span><br />-->
                                <!--<span class="red">可选￥1600永久</span><br />-->
                            <!--</p>-->
                            <!--<a href="tencent://message/?uin=824831811&Site=hexun.com/ngdao&Menu=yes" class="btn btn-select-plan btn-sm">立即购买</a>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="htmlTableCol-md-4">-->
                        <!--<div class="price-box to-animate-2 popular">-->
                            <!--<h2 class="pricing-plan pricing-plan-offer">企业版</h2>-->
                            <!--<div class="price">￥1400 / 年</div>-->
                            <!--<p>-->
                                <!--<span>企业商用使用权</span><br />-->
                                <!--<span>优先答疑和问题修复</span><br />-->
                                <!--<span>隐藏推广信息</span><br />-->
                                <!--<span>VIP用户交流群</span><br />-->
                                <!--<span class="red">可选￥5600永久</span><br />-->
                            <!--</p>-->
                            <!--<a href="tencent://message/?uin=824831811&Site=hexun.com/ngdao&Menu=yes" class="btn btn-select-plan btn-sm">立即购买</a>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>
            </div>

            <div class="row">
                <div class="htmlTableCol-md-6 htmlTableCol-md-offset-3 to-animate">
                    <p>本软件作品的著作权、商标权等知识产权属于作者所有， 受《中华人民共和国著作权法》、《计算机软件保护条例》、《知识产权保护条例》和相关国际版权条约、法律、法规，以及其它知识产权法律和条约的保护。</p>
                </div>
            </div>

        </div>
    </div>
</section>

<!--<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" title="网站模板">网站模板</a></div>-->

<section id="fh5co-team" data-section="team">
    <div class="fh5co-team">
        <div class="container">
            <div class="row">
                <div class="htmlTableCol-md-12 section-heading text-center">
                    <h2 class="to-animate" th:text="${team.title}"></h2>
                    <div class="row">
                        <div class="htmlTableCol-md-8 htmlTableCol-md-offset-2 subtext">
                            <h3 class="to-animate" th:text="${team.titledescription}"></h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row1">
                <!--<div class="htmlTableCol-md-8 htmlTableCol-md-offset-2">-->
                    <!--<div class="team-box text-center to-animate-2">-->
                        <!--<div class="user"><img class="img-reponsive" src="https://q1.qlogo.cn/g?b=qq&nk=824831811&s=100" alt="Yuri2">-->
                        <!--</div>-->
                        <!--<h3>Yuri2</h3>-->
                        <!--<span class="position">全栈开发工程师</span>-->
                        <!--<p>PHP | Node.JS | HTML5 | Javascript | Linux</p>-->
                        <!--<ul class="social-media">-->
                            <!--<li><a href="https://yuri2.cn" target="_blank"><i class="icon-book2"></i></a></li>-->
                            <!--<li><a href="mailto:yuri2peter@qq.com" target="_blank" ><i class="icon-envelope-letter"></i></a></li>-->
                            <!--<li><a href="https://github.com/yuri2peter" target="_blank" ><i class="icon-github-alt"></i></a></li>-->
                        <!--</ul>-->
                    <!--</div>-->
                <span id="zerif_team-widget-1" class="" th:each="teammembers:${teammembersList}">
                       <div class="htmlTableCol-lg-3 htmlTableCol-sm-3 team-box2">
                          <div class="team-member" tabindex="0">
                              <figure class="profile-pic">
                                  <img th:src="${teammembers.url}" alt=""/>
                              </figure>
	                         <div class="member-details">
                                <h3 class="dark-text red-border-bottom" th:text="${teammembers.name}"></h3>
                                <div class="position" th:text="${teammembers.sparefield1}"></div>
                             </div>
                          <div class="social-icons">
                             <ul>
                                 <li>
                                 <a href="#" target="_self">
	                             <span class="sr-only">Facebook account of</span>
			                     <i class="fa fa-facebook"></i>
                                 </a>
                                 </li>
                                 <li>
                                <a href="#" target="_self">
			                       <span class="sr-only">Twitter account of </span>
			                       <i class="fa fa-twitter"></i>
                                </a>
                                 </li>
                                 <li>
                                  <a href="#" target="_self">
			                        <span class="sr-only">Behance account of  ASHLEY SIMMONS</span>
                                      <i class="fa fa-behance"></i>
                                  </a>
                                 </li>
                                 <li>
                                  <a href="#" target="_self">
		                         	 <span class="sr-only">Dribble account of  ASHLEY SIMMONS</span>
		                    	     <i class="fa fa-dribbble"></i>
                                  </a>
                                 </li>
                             </ul>
                          </div>
                              <div class="details" th:text="${teammembers.description}"></div>
                          </div>
                       </div>
                </span>
            </div>
        </div>
    </div>
</section>

<section id="fh5co-trusted" data-section="company">
    <div class="fh5co-company">
        <div class="container">
            <div class="row">
                <div class="htmlTableCol-md-12 section-heading text-center">
                    <h2 class="to-animate" th:text="${cooperation.title}"></h2>
                    <div class="row">
                        <div class="htmlTableCol-md-8 htmlTableCol-md-offset-2 subtext">
                            <h3 class="to-animate" th:text="${cooperation.titledescription}"></h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" th:each="cooperationcompanySubList:${cooperationcompanyList}">
                <div class="htmlTableCol-md-2 htmlTableCol-sm-3 " th:each="cooperationcompany,cooperationcompanyStat:${cooperationcompanySubList}" th:classappend="${cooperationcompanyStat.index==0}?'htmlTableCol-xs-6 htmlTableCol-sm-offset-0 htmlTableCol-md-offset-1':''">
                    <div class="partner-logo to-animate-2">
                        <img th:src="${cooperationcompany.picurl}" alt="Partners" class="img-responsive">
                    </div>
                </div>

                <!--<div class="htmlTableCol-md-2 htmlTableCol-sm-3 htmlTableCol-xs-6">-->
                <!--<div class="partner-logo to-animate-2">-->
                <!--<img src="images/logo4.png" alt="Partners" class="img-responsive">-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="htmlTableCol-md-2 htmlTableCol-sm-12 htmlTableCol-xs-12">-->
                <!--<div class="partner-logo to-animate-2">-->
                <!--<img src="images/logo5.png" alt="Partners" class="img-responsive">-->
                <!--</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</section>



<section id="fh5co-faq" data-section="faq">
    <div class="fh5co-faq">
        <div class="container">
            <div class="row">
                <div class="htmlTableCol-md-12 section-heading text-center">
                    <h2 class="to-animate" th:text="${faq.title}"></h2>
                    <div class="row">
                        <div class="htmlTableCol-md-8 htmlTableCol-md-offset-2 subtext">
                            <h3 class="to-animate" th:text="${faq.titledescription}"></h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="htmlTableCol-md-6" th:each="temp_questionanswerList:${questionanswerList}">
                    <div class="box-faq to-animate-2" th:each="questionanswer:${temp_questionanswerList}">
                        <h3 th:utext="${questionanswer.titledescription}"></h3>
                        <p th:utext="${questionanswer.answer}"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<hr>




<!--<div class="getting-started getting-started-2" style="background: #4b3f67">-->
    <!--<div class="container">-->
        <!--<div class="row">-->
            <!--<div class="htmlTableCol-md-6 to-animate">-->
                <!--<h3>支持项目</h3>-->
                <!--<p>您喜欢这个项目吗？-->
                    <!--<a target="_blank" href="https://github.com/yuri2peter/ylui">点击这里</a>-->
                    <!--为项目送上一颗Star，或扫描二维码请作者喝一杯咖啡~</p>-->
            <!--</div>-->
            <!--<div class="htmlTableCol-md-6 to-animate-2" style="text-align: right">-->
                <!--<img style="height: 220px" src="images/donation_weixin.jpg">-->
                <!--<img style="height: 220px" src="images/donation_zhifubao.jpg">-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->

<div id="fh5co-footer" role="contentinfo">
    <div class="container">
        <div class="row">
            <div class="htmlTableCol-md-4 to-animate">
                <h3 class="section-title">关于</h3>
                <p>
                    IFI官方网站，请牢记地址 <a href="http://localhost:8080/">www.sinosoft.com.cn</a>
                    <br/>版权所有，翻版必究
                </p>
                <p class="copy-right">&copy; 2018 sinosoft.com. <br>All Rights Reserved.
                </p>
            </div>

            <div class="htmlTableCol-md-4 to-animate">
                <h3 class="section-title">联系我们</h3>
                <ul class="contact-info">
                    <li><i class="icon-qq" ></i><a th:text="${baseinfo.sparefield1}"></a></li>
                    <li><i class="icon-envelope"></i><a href="mailto:1576306970@qq.com" target="_blank" th:text="${baseinfo.sparefield2}"></a></li>
                    <li><i class="icon-globe2"></i><a href="http://localhost:8080/" target="_blank" th:text="${baseinfo.sparefield3}"></a></li>
                    <li><i class="icon-github-alt"></i><a href="http://localhost:8080/" target="_blank" th:text="${baseinfo.sparefield4}"></a></li>
                </ul>
            </div>
            <div class="htmlTableCol-md-4 to-animate">
                <h3 class="section-title">加入我们</h3>
                <ul class="contact-info">
                    <li><i class="icon-qq"></i><a href="https://jq.qq.com/?_wv=1027&k=5fAsios" target="_blank" >官方QQ群: 191372634</a></li>
                    <li><i class="icon-people"></i>公众号：请搜索“IFI软件”<br/>或微信扫描二维码加入</li>
                    <li><img width="128" src="/static/YLUI/images/qrcode-gongzhong.jpg" /></li>
                </ul>
            </div>

            <div class="htmlTableCol-md-4 to-animate">
                <h3 class="section-title">Drop us a line</h3>
                <form class="contact-form">
                    <div class="form-group">
                        <label for="name" class="sr-only">Name</label>
                        <input type="name" class="form-control" id="name" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="email" class="sr-only">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="message" class="sr-only">Message</label>
                        <textarea class="form-control" id="message" rows="7" placeholder="Message"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="submit" id="btn-submit" class="btn btn-send-message btn-md" value="Send Message">
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<!-- jQuery -->
<script src="static/YLUI/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="static/YLUI/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="static/YLUI/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="static/YLUI/js/jquery.waypoints.min.js"></script>
<!-- Stellar Parallax -->
<script src="static/YLUI/js/jquery.stellar.min.js"></script>
<!-- Owl Carousel -->
<script src="static/YLUI/js/owl.carousel.min.js"></script>
<!-- Main JS (Do not remove) -->
<script src="static/YLUI/js/main.js"></script>

</body>
</html>

